<style lang="scss">
  .exercise-2 {
    $white: rgba(255, 255, 255, 1);
    $black: rgba(0, 0, 0, 1);
    $morningbg: rgba(253, 242, 235, 1);
    $noonbg: rgba(252, 222, 201, 1);
    $eveningbg: rgba(220, 158, 114, 1);
    $nightbg: rgba(97, 68, 48, 1);
    $lightsalmon: rgba(254, 231, 212, 1);
    $darksalmon: rgba(252, 222, 201, 1);
    $lightblue: rgba(140, 202, 202, 1);
    $midblue: rgba(8, 91, 144, 1);
    $darkblue: rgba(16, 24, 84, 1);
    $red: rgba(243, 83, 102, 1);

    @mixin horizontalcenter() {
      left: 50%;
      transform: translatex(-50%);
    }

    @mixin verticalcenter() {
      top: 50%;
      transform: translatey(-50%);
    }

    @mixin centercenter() {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    @mixin tree($p_height, $p_color) {
      width: 0;
      height: 0;
      margin-top: $p_height;
      margin-left: $p_height / 4;
      border-width: 0 $p_height*0.75 $p_height*2.5 $p_height*0.75;
      border-style: solid;
      border-color: transparent transparent $p_color transparent;
      overflow: visible;
      &:before, &:after {
        display: block;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent transparent $p_color transparent;
      }
      &:before {
        top: -$p_height*0.85;
        @include horizontalcenter();
        border-width: 0 $p_height*0.55 $p_height*2 $p_height*0.55;
      }
      &:after {
        top: -$p_height*1.45;
        @include horizontalcenter();
        border-width: 0 $p_height*0.45 $p_height*1.5 $p_height*0.45;
      }
    }

    @mixin peak($p_width) {
      border-style: solid;
      border-width: 0 $p_width*0.5 $p_width*0.86 $p_width*0.5;
      border-color: transparent transparent #007bff transparent;
    }

    div {
      position: absolute;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      overflow: hidden;
      &:before, &:after {
        content: '';
        position: absolute;
        display: none;
        box-sizing: border-box;
      }
    }
    .wrapper {
      top: 50%;
      left: 0;
      width: 100vw;
      height: 30vw;
      margin: 0;
      padding: 0;
      transform: translatey(-50%);
      white-space: nowrap;
      overflow: visible;

      & .painting {
        position: relative;
        display: inline-block;
        width: 20vw;
        height: 30vw;
        margin: 0 2vw;
        border: 0.75vw solid white;
        box-shadow: 0 0 5vw $darksalmon;
        background: $darksalmon;
        overflow: hidden;

        & .mountain {
          overflow: visible;
          &.front.left {
            top: 80%;
            left: -40%;
            width: 120%;
            height: 60%;
            background: $darkblue;
            transform: rotate(30deg);
            &:before, &:after {
              display: block;
              width: 60%;
              height: 40%;
              background: $darkblue;
            }
            &:before {
              top: -5%;
              left: -30%;
              transform: rotate(8deg);
            }
            &:after {
              top: -1%;
              left: 55%;
              transform: rotate(-10deg);
            }

            & .tree {
              transform: rotate(-30deg);
              &.tree1 {
                top: -6vw;
                left: 5%;
                @include tree(2vw, $darkblue);
              }
              &.tree2 {
                top: -5vw;
                left: 25%;
                @include tree(1.75vw, $darkblue);
              }
              &.tree3 {
                top: -4vw;
                left: 40%;
                @include tree(1.5vw, $darkblue);
              }
            }

          }
          &.front.right {
            top: 75%;
            left: 40%;
            width: 120%;
            height: 60%;
            background: $midblue;
            transform: rotate(-30deg);

            & .tree {
              transform: rotate(30deg);
              &.tree1 {
                top: -3.5vw;
                right: 30%;
                @include tree(1.25vw, $midblue);
              }
              &.tree2 {
                top: -6vw;
                right: 40%;
                @include tree(2vw, $midblue);
              }
              &.tree3 {
                top: -3vw;
                right: 60%;
                @include tree(1vw, $midblue);
              }
            }

          }
          &.mid {
            top: 60%;
            left: 0;
            width: 100%;
            height: 30%;
            filter: drop-shadow(0 0 3vw $white);
            & .peak {
              background: linear-gradient(135deg, $lightblue 0%, $white 50%);
              transform: rotate(45deg);
              &.peak1 {
                top: 10%;
                left: -10%;
                width: 60%;
                padding-top: 60%;
              }
              &.peak2 {
                top: 0;
                left: 30%;
                width: 60%;
                padding-top: 60%;
              }
              &.peak3 {
                top: 20%;
                left: -27%;
                width: 60%;
                padding-top: 60%;
              }
              &.peak4 {
                top: 22%;
                left: 52%;
                width: 60%;
                padding-top: 60%;
              }
              &.peak5 {
                top: 12%;
                left: 65%;
                width: 60%;
                padding-top: 60%;
              }
              &.peak6 {
                top: 5%;
                left: 15%;
                width: 60%;
                padding-top: 60%;
              }
            }
          }
          &.back {
            top: 30%;
            left: 0;
            width: 100%;
            height: 70%;

            & .peak {
              background: linear-gradient(45deg, $lightblue 50%, $white 50%);
              transform: rotate(45deg);
              &.peak1 {
                top: 25%;
                left: -40%;
                width: 100%;
                padding-top: 100%;
              }
              &.peak2 {
                top: 22%;
                left: -30%;
                width: 100%;
                padding-top: 100%;
              }
              &.peak3 {
                top: 15%;
                left: -15%;
                width: 100%;
                padding-top: 100%;
              }
              &.peak4 {
                top: 10%;
                left: 0%;
                width: 100%;
                padding-top: 100%;
              }
              &.peak5 {
                top: 15%;
                left: 10%;
                width: 100%;
                padding-top: 100%;
              }
              &.peak6 {
                top: 25%;
                left: 25%;
                width: 100%;
                padding-top: 100%;
              }
              &.peak7 {
                top: 30%;
                left: 40%;
                width: 100%;
                padding-top: 100%;
              }
            }

          }
        }

        & .sun {
          top: 10%;
          @include horizontalcenter();
          width: 70%;
          padding-top: 70%;
          border-radius: 50%;
          background: $red;
        }

        &.morning {

          background: $morningbg;
          filter: saturate(0.5) brightness(0.8);

          & .sun {
            top: 30%;
            left: -40%;
            transform: translatey(0);
          }

        }

        &.noon {

          background: $noonbg;
          filter: saturate(1) brightness(1);

          & .sun {
          }

        }

        &.evening {

          background: $eveningbg;
          filter: saturate(0.65) brightness(0.9);

          & .sun {
            top: 15%;
            left: 40%;
            transform: translatey(0);
          }

        }

        &.night {

          background: $nightbg;
          filter: hue-rotate(0) saturate(0.15) brightness(0.25);

          & .sun {
            display: none;
            top: 15%;
            left: 40%;
            transform: translatey(0);
          }

        }

      }

    }
  }


</style>
<template>
  <div class="exercise-2">
    <div class="wrapper">
      <div class="painting morning">
        <div class="sun"></div>
        <div class="mountain back">
          <div class="peak peak1"></div>
          <div class="peak peak2"></div>
          <div class="peak peak3"></div>
          <div class="peak peak4"></div>
          <div class="peak peak5"></div>
          <div class="peak peak6"></div>
          <div class="peak peak7"></div>
        </div>
        <div class="mountain mid">
          <div class="peak peak1"></div>
          <div class="peak peak2"></div>
          <div class="peak peak3"></div>
          <div class="peak peak4"></div>
          <div class="peak peak5"></div>
          <div class="peak peak6"></div>
        </div>
        <div class="mountain front right">
          <div class="tree tree1"></div>
          <div class="tree tree2"></div>
          <div class="tree tree3"></div>
          <div class="tree tree4"></div>
        </div>
        <div class="mountain front left">
          <div class="tree tree1"></div>
          <div class="tree tree2"></div>
          <div class="tree tree3"></div>
        </div>
      </div>
      <div class="painting noon">
        <div class="sun"></div>
        <div class="mountain back">
          <div class="peak peak1"></div>
          <div class="peak peak2"></div>
          <div class="peak peak3"></div>
          <div class="peak peak4"></div>
          <div class="peak peak5"></div>
          <div class="peak peak6"></div>
          <div class="peak peak7"></div>
        </div>
        <div class="mountain mid">
          <div class="peak peak1"></div>
          <div class="peak peak2"></div>
          <div class="peak peak3"></div>
          <div class="peak peak4"></div>
          <div class="peak peak5"></div>
          <div class="peak peak6"></div>
        </div>
        <div class="mountain front right">
          <div class="tree tree1"></div>
          <div class="tree tree2"></div>
          <div class="tree tree3"></div>
          <div class="tree tree4"></div>
        </div>
        <div class="mountain front left">
          <div class="tree tree1"></div>
          <div class="tree tree2"></div>
          <div class="tree tree3"></div>
        </div>
      </div>
      <div class="painting evening">
        <div class="sun"></div>
        <div class="mountain back">
          <div class="peak peak1"></div>
          <div class="peak peak2"></div>
          <div class="peak peak3"></div>
          <div class="peak peak4"></div>
          <div class="peak peak5"></div>
          <div class="peak peak6"></div>
          <div class="peak peak7"></div>
        </div>
        <div class="mountain mid">
          <div class="peak peak1"></div>
          <div class="peak peak2"></div>
          <div class="peak peak3"></div>
          <div class="peak peak4"></div>
          <div class="peak peak5"></div>
          <div class="peak peak6"></div>
        </div>
        <div class="mountain front right">
          <div class="tree tree1"></div>
          <div class="tree tree2"></div>
          <div class="tree tree3"></div>
          <div class="tree tree4"></div>
        </div>
        <div class="mountain front left">
          <div class="tree tree1"></div>
          <div class="tree tree2"></div>
          <div class="tree tree3"></div>
        </div>
      </div>
      <div class="painting night">
        <div class="sun"></div>
        <div class="mountain back">
          <div class="peak peak1"></div>
          <div class="peak peak2"></div>
          <div class="peak peak3"></div>
          <div class="peak peak4"></div>
          <div class="peak peak5"></div>
          <div class="peak peak6"></div>
          <div class="peak peak7"></div>
        </div>
        <div class="mountain mid">
          <div class="peak peak1"></div>
          <div class="peak peak2"></div>
          <div class="peak peak3"></div>
          <div class="peak peak4"></div>
          <div class="peak peak5"></div>
          <div class="peak peak6"></div>
        </div>
        <div class="mountain front right">
          <div class="tree tree1"></div>
          <div class="tree tree2"></div>
          <div class="tree tree3"></div>
          <div class="tree tree4"></div>
        </div>
        <div class="mountain front left">
          <div class="tree tree1"></div>
          <div class="tree tree2"></div>
          <div class="tree tree3"></div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    components: {},
    data() {
      return {
        count: 0
      }
    },
    computed: {},
    methods: {},
    mounted() {
    }
  }
</script>
